<template>
  <div class="main_app">
    <h1>ASIN Grabber</h1>
    <el-check-tag
      v-for="asinGroup in asinGroupList"
      :key="asinGroup.groupId"
      class="asin-group-tag"
      @change="onTagChange(asinGroup.groupId)"
      :checked="currentAsinGroupId === asinGroup.groupId"
    >
      {{asinGroup.groupName}} ({{asinGroup.products}})
    </el-check-tag>
    <el-table
      :data="data"
      :loading="loading"
    >
      <el-table-column prop="asin" label="ASIN" width="120px"></el-table-column>
      <el-table-column prop="photoUrl" label="图片" width="120px">
        <template #default="{row}">
          <img class="asinImage" :src="row.photoUrl" />
        </template>
      </el-table-column>
      <el-table-column prop="title" label="标题" width="400px"></el-table-column>
      <el-table-column label="操作" width="400px">
        <template #default="{row}">
          <div>
            <el-link target="_blank" :href="`https://www.amazon.com/dp/${row.asin}`">抓取数据</el-link>
            <!-- {{`https://www.amazon.com/dp/${row.asin}`}} -->
            <!-- <a target="_blank" href="https://www.baidu.com">download</a> -->
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- {{data}} -->
  </div>
</template>

<script>
import axios from 'axios'
import { host } from '../config'
const qryASINApi = `${host}/web.do?fn=qryASIN`
const qryASINGroupApi = `${host}/web.do?fn=qryAsinGroup`
export default {
  name: 'popupView',
  mounted() {
    axios.post(qryASINGroupApi, {"pagesize":10,"page":1,"opt":1})
      .then(({ data }) => {
        this.asinGroupList = data.data
        this.onTagChange(this.currentAsinGroupId)
      })
  },
  data () {
    return {
      msg: 'popup',
      data: [],
      asinGroupList: [],
      currentAsinGroupId: 'default',
      loading: true
    }
  },
  methods: {
    grabAll() {
      for(const item of this.data) {
        setTimeout(() => {
          const asin = item.asin
          window.open(`https://www.amazon.com/dp/${asin}`)
        }, 1000);
      }
    },
    onTagChange(groupId) {
      this.loading = true
      this.currentAsinGroupId = groupId
      axios.post(qryASINApi, {
        groupId: groupId
      }).then(({data}) => {
        this.loading = false
        this.data = data.data
      })
    }
  }
}

</script>

<style>
.main_app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.asinImage {
  width: 90px;
}
.asin-group-tag {
  margin: 4px;
}
</style>
